<!-- BPI组件 -->
<template>
  <div class="wrap">
    <div class="wrap-header">
      <span class="wrap-header-title">能力素质考核（BPI）</span>
      <span>维度权重：{{ props.weight }}%</span>
    </div>

    <div style="margin-bottom: 20px">
      <div class="header">
        <div style="margin-left: 10px">维度考核工具：能力素质考核（BPI）</div>
        <div>
          <a-button type="text">引用指标库</a-button>
          <a-button type="text">工具设置</a-button>
          <a-button type="text" @click="rulesVisible = true"
            >评分标准设置</a-button
          >
        </div>
      </div>
      <div>
        <a-table
          :columns="columns"
          ref="tableRef"
          :data="bpiData.data"
          :bordered="{ headerCell: true }"
          stripe
        >
          <template #optional="{ record, rowIndex }">
            <a-tooltip content="编辑">
              <icon-font
                type="icon-edit"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer'
                }"
                @click="add(record, rowIndex)"
              />
            </a-tooltip>
            <a-tooltip content="删除" position="left">
              <a-popconfirm
                content="是否确认删除该条数据?"
                position="left"
                @ok="del(record, rowIndex)"
              >
                <IconFont
                  type="icon-delete"
                  :size="26"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer'
                  }"
                />
              </a-popconfirm>
            </a-tooltip>
          </template>
        </a-table>
        <a-button type="text" @click="add(null)">新增指标</a-button>
      </div>
    </div>
  </div>
  <IndexDrawer
    v-model:visible="visible"
    :data="currData"
    :rules="currRulesData"
    @bpiIndexEmit="bpiIndexEmit"
    :weight="props.weight"
    :maxWeight="maxWeight"
  ></IndexDrawer>
  <RulesModal
    v-model:visible="rulesVisible"
    @rulesSettingEmit="rulesSettingEmit"
    :bpiData="bpiData.data"
    :rules="currRulesData"
  ></RulesModal>
</template>

<script lang="ts" setup>
import { DelProbationTemplateTool } from '@/apis/management/performance/baseSetting/template';
import IndexDrawer from './IndexDrawer.vue';
import ExtraDrawer from './ExtraDrawer.vue';
import RulesModal from './RulesModal.vue';
import { Message } from '@arco-design/web-vue';

const props = withDefaults(
  defineProps<{
    weight?: any; // 维度权重,
  }>(),
  {}
);

const bpiData = reactive({
  data: [
    // {
    //   rules: [
    //     {
    //       name: '优秀A',
    //       value: 1
    //     },
    //     {
    //       name: '优秀A',
    //       value: 2
    //     },
    //     {
    //       name: '优秀A',
    //       value: 3
    //     },
    //     {
    //       name: '优秀A',
    //       value: 4
    //     },
    //     {
    //       name: '优秀A',
    //       value: 5
    //     }
    //   ]
    // }
  ]
});
let maxWeight = ref(0); // 储存当前的权重值总和

let currData = ref({
    evaluations: [
      {
        name: '优秀A',
        value: undefined
      },
      {
        name: '良好B',
        value: undefined
      },
      {
        name: '合格C',
        value: undefined
      },
      {
        name: '较差D',
        value: undefined
      },
      {
        name: '差E',
        value: undefined
      }
    ]
  }),
  // 储存当前的bpi指标
  currRulesData = ref([
    {
      name: '优秀A',
      value: undefined
    },
    {
      name: '良好B',
      value: undefined
    },
    {
      name: '合格C',
      value: undefined
    },
    {
      name: '较差D',
      value: undefined
    },
    {
      name: '差E',
      value: undefined
    }
  ]); // 储存当前的评分规则,

// bpi的table字段
const columns: any = reactive([
  {
    title: '序号',
    render: ({ rowIndex }: { rowIndex: number }) => rowIndex + 1,
    width: 80
  },
  {
    title: '指标名称',
    dataIndex: 'name',
    width: 100
  },
  {
    title: '指标定义',
    dataIndex: 'definition',
    width: 100
  },
  {
    title: '评分标准',
    width: 300,
    headerCellStyle: {
      height: '30px'
    },
    // slotName: 'rules',
    children: [
      {
        title: '优秀A',
        width: 150,
        headerCellStyle: {
          height: '30px'
        },
        render: ({ record, rowIndex }: any) => record.evaluations[0].value
      },
      {
        title: '良好B',
        width: 150,
        headerCellStyle: {
          height: '30px'
        },
        render: ({ record, rowIndex }: any) => record.evaluations[1].value
      },
      {
        title: '合格C',
        width: 150,
        headerCellStyle: {
          height: '30px'
        },
        render: ({ record, rowIndex }: any) => record.evaluations[2].value
      },
      {
        title: '较差D',
        width: 150,
        headerCellStyle: {
          height: '30px'
        },
        render: ({ record, rowIndex }: any) => record.evaluations[3].value
      },
      {
        title: '差E',
        width: 150,
        headerCellStyle: {
          height: '30px'
        },
        render: ({ record, rowIndex }: any) => record.evaluations[4].value
      }
    ]
  },
  {
    title: '指标权重',
    dataIndex: 'weight',
    width: 100
  },
  {
    title: '评分人',
    dataIndex: 'goal',
    width: 150
  },
  {
    title: '操作',
    width: 150,
    fixed: 'right',
    slotName: 'optional'
  }
]);

let visible = ref(false); // 新增kpi弹出框
let currIndex = ref(-1); // 记录当前选中行的index
// 新增/编辑指标
const add = (record: any, index?: number) => {
  if (index !== undefined) currIndex.value = index;
  else currIndex.value = -1;
  currData.value = record;
  visible.value = true;
};

// 删除指标
const del = async (record: any, index: number) => {
  if (record.id) {
    await DelProbationTemplateTool({
      id: record.id,
      tool: 2
    });
    bpiData.data.splice(index, 1);
    maxWeight.value = 0;
    bpiData.data.forEach((item: any) => {
      maxWeight.value += item.weight;
    });
  } else {
    bpiData.data.splice(index, 1);
    maxWeight.value = 0;
    bpiData.data.forEach((item: any) => {
      maxWeight.value += item.weight;
    });
  }
};

// bpi弹出框自定义事件
const bpiIndexEmit = (record: any) => {
  if (currIndex.value !== -1) bpiData.data[currIndex.value] = record;
  else bpiData.data.push(record);
  currIndex.value = -1;

  maxWeight.value = 0;
  bpiData.data.forEach((item: any) => {
    maxWeight.value += item.weight;
  });
  // console.log(record);
};

let rulesVisible = ref(false); // 评分标准设置弹出框

// 规则设置弹出框
const rulesSettingEmit = (record: any) => {
  currRulesData.value = [];
  const temp = columns.find((item: any) => item.title === '评分标准');
  temp.children = [];
  record.settingName.forEach((item: any, index: number) => {
    temp.children.push({
      title: item.name,
      width: 150,
      headerCellStyle: {
        height: '30px'
      },
      render: ({ record }: any) => record.evaluations[index].value
    });
    currRulesData.value.push({
      name: item.name,
      value: undefined
    });
  });
};
defineExpose({ bpiData, columns, currRulesData });
</script>

<style scoped lang="less">
.wrap {
  .wrap-header {
    position: relative;
    // width: 100%;
    height: 50px;
    border-radius: 3px;
    background-color: rgb(var(--primary-10));
    line-height: 50px;
    padding: 0 10px;
    margin-bottom: 10px;
  }
  .wrap-header::before {
    display: inline-block;
    content: '';
    width: 5px;
    height: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #165dff;
  }
  .wrap-header-title {
    margin-left: 10px;
  }
  .wrap-header-title::before {
    content: '*';
    display: inline-block;
    color: red;
  }
  .header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    border-radius: 3px;
    background-color: rgb(var(--primary-10));
    line-height: 50px;
    margin-bottom: 10px;
  }
  :deep(.arco-form-item-label-required-symbol) {
    position: relative;
    top: 35px;
  }
}
</style>
